<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <search-form
      :query-params="queryParams"
      :show-search="showSearch"
      @query="handleQuery"
      @reset="resetQuery"
      @toggle-search="toggleSearch"
    >
      <el-form-item label="单号" prop="txNo">
        <el-input
          v-model="queryParams.txNo"
          placeholder="请输入单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出入库类型" prop="txType">
        <el-select v-model="queryParams.txType" placeholder="请选择出入库类型" clearable @change="handleQuery">
          <el-option label="全部" value="" />
          <el-option label="入库" value="INBOUND" />
          <el-option label="出库" value="OUTBOUND" />
        </el-select>
      </el-form-item>
      <el-form-item label="仓库" prop="warehouseCode">
        <el-select v-model="queryParams.warehouseCode" placeholder="请选择仓库" clearable @change="handleQuery">
          <el-option label="全部" value="" />
          <el-option
            v-for="warehouse in warehouseOptions"
            :key="warehouse.code"
            :label="warehouse.name"
            :value="warehouse.code"
          />
        </el-select>
      </el-form-item>
    </search-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAddInbound"
          v-hasPermi="['system:transaction:add']"
        >新增入库</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-minus"
          size="mini"
          @click="handleAddOutbound"
          v-hasPermi="['system:transaction:add']"
        >新增出库</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 交易列表 -->
    <el-table v-loading="loading" :data="transactionList" stripe border>
      <el-table-column label="单号" align="center" prop="txNo" width="200" show-overflow-tooltip />
      <el-table-column label="出/入库" align="center" prop="txType" width="100">
        <template slot-scope="scope">
          <type-tag :value="scope.row.txType" type="txType" />
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="bizRefType" width="120">
        <template slot-scope="scope">
          <type-tag :value="scope.row.bizRefType" type="bizRefType" />
        </template>
      </el-table-column>
      <el-table-column label="仓库" align="center" width="120">
        <template slot-scope="scope">
          {{ getWarehouseName(scope.row.warehouseCode) }}
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" prop="createdAt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="operatorName" width="120" />
      <el-table-column label="原因" align="center" prop="remark" show-overflow-tooltip />
      <el-table-column label="操作" align="center" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleViewDetail(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" style="color: #f56c6c" @click="handleDelete(scope.row)" v-hasPermi="['system:transaction:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 入库对话框 -->
    <el-dialog title="新增入库" :visible.sync="inboundDialogVisible" width="80%" :close-on-click-modal="false">
      <el-form ref="inboundForm" :model="inboundForm" :rules="inboundRules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="选择仓库" prop="warehouseCode">
              <el-select v-model="inboundForm.warehouseCode" placeholder="请选择仓库" style="width: 100%">
                <el-option
                  v-for="warehouse in warehouseOptions"
                  :key="warehouse.code"
                  :label="warehouse.name"
                  :value="warehouse.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库类型" prop="bizRefType">
              <el-select v-model="inboundForm.bizRefType" placeholder="请选择入库类型" style="width: 100%">
                <el-option label="采购入库" value="PURCHASE" />
                <el-option label="调拨入库" value="TRANSFER" />
                <el-option label="退货入库" value="RETURN" />
                <el-option label="其他" value="OTHER" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" icon="el-icon-plus" @click="handleSelectParts('inbound')">选择备件</el-button>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="inboundForm.remark" type="textarea" :rows="2" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>

      <!-- 入库备件明细 -->
      <div class="part-details">
        <el-table :data="inboundForm.partList" border stripe>
          <el-table-column label="备件编号" prop="partNo" width="150" />
          <el-table-column label="备件名称" prop="partName" width="150" />
          <el-table-column label="规格型号" prop="specNo" width="120" />
          <el-table-column label="备件仓库" width="120">
            <template slot-scope="scope">
              {{ getWarehouseName(scope.row.warehouseCode) }}
            </template>
          </el-table-column>
      <el-table-column label="备件类型" prop="partTypeCode" width="120">
            <template slot-scope="scope">
          {{ getPartTypeName(scope.row.partTypeCode) }}
            </template>
          </el-table-column>
          <el-table-column label="分库存" prop="stockTotal" width="100" />
          <el-table-column label="入库数" width="120">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.quantity"
                :min="1"
                :max="999999"
                :step="1"
                :precision="0"
                size="small"
                style="width: 100%"
                placeholder="请输入数量"
                controls-position="right"
                :key="'inbound-' + scope.$index + '-' + scope.row.partNo + '-' + scope.row.quantity"
                @change="handleQuantityChange('inbound', scope.$index, $event)"
                @blur="handleQuantityBlur('inbound', scope.$index, $event)"
                @input="handleQuantityInput('inbound', scope.$index, $event)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" style="color: #f56c6c" @click="removePart('inbound', scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="inboundDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInboundForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 出库对话框 -->
    <el-dialog title="新增出库" :visible.sync="outboundDialogVisible" width="80%" :close-on-click-modal="false">
      <el-form ref="outboundForm" :model="outboundForm" :rules="outboundRules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="选择仓库" prop="warehouseCode">
              <el-select v-model="outboundForm.warehouseCode" placeholder="请选择仓库" style="width: 100%">
                <el-option
                  v-for="warehouse in warehouseOptions"
                  :key="warehouse.code"
                  :label="warehouse.name"
                  :value="warehouse.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库类型" prop="bizRefType">
              <el-select v-model="outboundForm.bizRefType" placeholder="请选择出库类型" style="width: 100%">
                <el-option label="领用出库" value="CONSUME" />
                <el-option label="调拨出库" value="TRANSFER" />
                <el-option label="维修出库" value="REPAIR" />
                <el-option label="其他" value="OTHER" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" icon="el-icon-plus" @click="handleSelectParts('outbound')">选择备件</el-button>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="outboundForm.remark" type="textarea" :rows="2" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>

      <!-- 出库备件明细 -->
      <div class="part-details">
        <el-table :data="outboundForm.partList" border stripe>
          <el-table-column label="备件编号" prop="partNo" width="150" />
          <el-table-column label="备件名称" prop="partName" width="150" />
          <el-table-column label="规格型号" prop="specNo" width="120" />
          <el-table-column label="备件仓库" width="120">
            <template slot-scope="scope">
              {{ getWarehouseName(scope.row.warehouseCode) }}
            </template>
          </el-table-column>
          <el-table-column label="备件类型" prop="partTypeCode" width="120">
            <template slot-scope="scope">
              <type-tag :value="scope.row.partTypeCode" type="partType" />
            </template>
          </el-table-column>
          <el-table-column label="分库存" prop="stockTotal" width="100" />
          <el-table-column label="出库数" width="120">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.quantity"
                :min="1"
                :max="Math.floor(scope.row.stockTotal || 999999)"
                :step="1"
                :precision="0"
                size="small"
                style="width: 100%"
                placeholder="请输入数量"
                controls-position="right"
                :key="'outbound-' + scope.$index + '-' + scope.row.partNo + '-' + scope.row.quantity"
                @change="handleQuantityChange('outbound', scope.$index, $event)"
                @blur="handleQuantityBlur('outbound', scope.$index, $event)"
                @input="handleQuantityInput('outbound', scope.$index, $event)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" style="color: #f56c6c" @click="removePart('outbound', scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="outboundDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOutboundForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看明细对话框 -->
    <el-dialog title="交易明细" :visible.sync="detailDialogVisible" width="70%">
      <div v-loading="detailLoading" element-loading-text="加载中...">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="单号">{{ currentTransaction.txNo }}</el-descriptions-item>
        <el-descriptions-item label="类型">
          <type-tag :value="currentTransaction.txType" type="txType" />
        </el-descriptions-item>
        <el-descriptions-item label="业务类型">
          <type-tag :value="currentTransaction.bizRefType" type="bizRefType" />
        </el-descriptions-item>
        <el-descriptions-item label="仓库">{{ getWarehouseName(currentTransaction.warehouseCode) }}</el-descriptions-item>
        <el-descriptions-item label="操作人">{{ currentTransaction.operatorName || currentTransaction.operatorId }}</el-descriptions-item>
        <el-descriptions-item label="时间">{{ parseTime(currentTransaction.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ currentTransaction.remark || '无' }}</el-descriptions-item>
      </el-descriptions>

      <h4 style="margin-top: 20px;">备件明细</h4>
      <el-table :data="transactionDetails" border stripe>
        <el-table-column label="备件编号" prop="partNo" width="150" />
        <el-table-column label="备件名称" prop="partName" width="150" />
        <el-table-column label="规格型号" prop="specNo" width="120" />
        <el-table-column label="备件类型" prop="partTypeCode" width="120">
          <template slot-scope="scope">
            {{ getPartTypeName(scope.row.partTypeCode) }}
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="quantity" width="100" />
        <el-table-column label="方向" prop="direction" width="100">
          <template slot-scope="scope">
            <type-tag :value="scope.row.direction" type="direction" />
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip />
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </div>
      </div>
    </el-dialog>

    <!-- 备件选择器 -->
    <part-selector
      :visible.sync="partSelectorVisible"
      :warehouse-code="currentForm.warehouseCode"
      @confirm="handlePartSelect"
    />
  </div>
</template>

<script>
import { listTransaction, getTransaction, delTransaction, addTransaction } from "@/api/inventory/transaction";
import { listWarehouse } from "@/api/inventory/warehouse";
import PartSelector from "@/views/components/PartSelector";
import TypeTag from "@/views/components/TypeTag.vue";
import SearchForm from "@/views/components/SearchForm.vue";
import RightToolbar from "@/components/RightToolbar";

export default {
  name: "Transaction",
  components: {
    PartSelector,
    TypeTag,
    SearchForm,
    RightToolbar
  },
  data() {
    return {
      // 加载状态
      loading: true,
      // 总条数
      total: 0,
      // 交易列表
      transactionList: [],
      // 仓库选项
      warehouseOptions: [],
      // 备件类型字典
      partTypeOptions: [],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        txNo: null,
        txType: null,
        warehouseCode: null
      },
      // 入库对话框
      inboundDialogVisible: false,
      inboundForm: {
        txType: 'INBOUND',
        warehouseCode: '',
        bizRefType: '',
        remark: '',
        partList: []
      },
      inboundRules: {
        warehouseCode: [
          { required: true, message: "请选择仓库", trigger: "change" }
        ],
        bizRefType: [
          { required: true, message: "请选择入库类型", trigger: "change" }
        ]
      },
      // 出库对话框
      outboundDialogVisible: false,
      outboundForm: {
        txType: 'OUTBOUND',
        warehouseCode: '',
        bizRefType: '',
        remark: '',
        partList: []
      },
      outboundRules: {
        warehouseCode: [
          { required: true, message: "请选择仓库", trigger: "change" }
        ],
        bizRefType: [
          { required: true, message: "请选择出库类型", trigger: "change" }
        ]
      },
      // 查看明细对话框
      detailDialogVisible: false,
      detailLoading: false,
      currentTransaction: {},
      transactionDetails: [],
      // 备件选择器
      partSelectorVisible: false,
      currentForm: {}
    };
  },
  async created() {
    // 先加载字典（仓库、备件类型），再加载列表
    await Promise.all([this.loadWarehouses(), this.loadPartTypes()])
    await this.getList();
  },
  methods: {
    /** 查询交易列表 */
    getList() {
      this.loading = true;
      // 先保存原始的txNo值用于本地过滤
      const originalTxNo = this.queryParams.txNo;

      // 创建不包含txNo的查询参数（因为后端不支持）
      const queryParamCopy = { ...this.queryParams };
      delete queryParamCopy.txNo;

      listTransaction(queryParamCopy).then(response => {
        let rows = response.rows;

        // 如果有txNo查询条件，则在前端进行过滤
        if (originalTxNo) {
          rows = rows.filter(item =>
            item.txNo && item.txNo.includes(originalTxNo)
          );
        }

        this.transactionList = rows;
        this.total = rows.length;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        txNo: null,
        txType: null,
        warehouseCode: null
      };
      this.handleQuery();
    },
    /** 切换搜索条件显示/隐藏 */
    toggleSearch() {
      this.showSearch = !this.showSearch;
    },
    /** 加载仓库列表 */
    loadWarehouses() {
      return listWarehouse({ pageNum: 1, pageSize: 9999 }).then(response => {
        this.warehouseOptions = response.rows || response.data || [];
      }).catch(() => { this.warehouseOptions = [] });
    },
    // 加载备件类型字典
    loadPartTypes() {
      return import('@/api/dict/partType').then(mod => {
        const listFn = mod.listPartType || mod.list
        if (!listFn) return
        return listFn({ pageNum: 1, pageSize: 9999, enabled: 1 }).then(res => {
          this.partTypeOptions = res.rows || res.data || []
        })
      }).catch(() => { this.partTypeOptions = [] })
    },
    getPartTypeName(code) {
      if (!code) return ''
      const it = this.partTypeOptions.find(t => String(t.code) === String(code))
      return it ? (it.name || it.label) : code
    },
    /** 根据仓库编码获取仓库名称 */
    getWarehouseName(warehouseCode) {
      if (!warehouseCode) return '';
      const warehouse = this.warehouseOptions.find(w => w.code === warehouseCode);
      return warehouse ? warehouse.name : warehouseCode;
    },
    /** 新增入库 */
    handleAddInbound() {
      this.resetInboundForm();
      this.inboundDialogVisible = true;
      this.$nextTick(() => {
        // 重置所有输入框的max属性
        this.resetInputNumberMax();
      });
    },
    /** 新增出库 */
    handleAddOutbound() {
      this.resetOutboundForm();
      this.outboundDialogVisible = true;
      this.$nextTick(() => {
        // 重置所有输入框的max属性
        this.resetInputNumberMax();
      });
    },
    /** 重置入库表单 */
    resetInboundForm() {
      this.inboundForm = {
        txType: 'INBOUND',
        warehouseCode: '',
        bizRefType: '',
        remark: '',
        partList: []
      };
      this.currentForm = this.inboundForm;
    },
    /** 重置出库表单 */
    resetOutboundForm() {
      this.outboundForm = {
        txType: 'OUTBOUND',
        warehouseCode: '',
        bizRefType: '',
        remark: '',
        partList: []
      };
      this.currentForm = this.outboundForm;
    },
    /** 选择备件 */
    handleSelectParts(type) {
      if (type === 'inbound') {
        this.currentForm = this.inboundForm;
      } else {
        this.currentForm = this.outboundForm;
      }
      this.partSelectorVisible = true;
    },
    /** 备件选择确认 */
    handlePartSelect(parts) {
      const currentForm = this.currentForm;
      const existingPartNos = currentForm.partList.map(p => p.partNo);
      const newParts = parts.filter(part => !existingPartNos.includes(part.partNo));

      newParts.forEach(part => {
        // 确保quantity是数字类型，默认为1
        part.quantity = 1;
        part.warehouseCode = currentForm.warehouseCode;
        if (!part.specNo && part.specification) {
          part.specNo = part.specification;
        }
        if (!part.partTypeCode && part.partType) {
          part.partTypeCode = part.partType;
        }
      });

      currentForm.partList = currentForm.partList.concat(newParts);

      // 强制刷新组件并确保quantity值正确
      this.$nextTick(() => {
        // 确保所有新添加的备件quantity都是数字类型
        newParts.forEach((part, index) => {
          const actualIndex = currentForm.partList.length - newParts.length + index;
          if (currentForm.partList[actualIndex]) {
            currentForm.partList[actualIndex].quantity = 1;
          }
        });
        this.$forceUpdate();
      });
    },
    /** 移除备件 */
    removePart(type, index) {
      if (type === 'inbound') {
        this.inboundForm.partList.splice(index, 1);
      } else {
        this.outboundForm.partList.splice(index, 1);
      }
    },
    /** 处理数量变化 */
    handleQuantityChange(type, index, value) {
      // 强制设置值，忽略任何限制
      let newValue = parseInt(value);
      if (isNaN(newValue) || newValue < 1) newValue = 1;
      if (newValue > 999999) newValue = 999999;
      if (type === 'inbound') {
        this.$set(this.inboundForm.partList[index], 'quantity', newValue);
      } else {
        this.$set(this.outboundForm.partList[index], 'quantity', newValue);
      }
      // 强制更新视图
      this.$forceUpdate();
    },
    /** 处理数量输入 */
    handleQuantityInput(type, index, value) {
      // 实时更新值
      let newValue = parseInt(value);
      if (isNaN(newValue) || newValue < 1) newValue = 1;
      if (newValue > 999999) newValue = 999999;
      if (type === 'inbound') {
        this.$set(this.inboundForm.partList[index], 'quantity', newValue);
      } else {
        this.$set(this.outboundForm.partList[index], 'quantity', newValue);
      }
    },
    /** 处理数量输入框失焦 */
    handleQuantityBlur(type, index, event) {
      let inputValue = parseInt(event.target.value);
      if (isNaN(inputValue) || inputValue < 1) inputValue = 1;
      if (inputValue > 999999) inputValue = 999999;
      if (type === 'inbound') {
        this.$set(this.inboundForm.partList[index], 'quantity', inputValue);
      } else {
        this.$set(this.outboundForm.partList[index], 'quantity', inputValue);
      }
      // 强制更新视图
      this.$forceUpdate();
    },
    /** 重置输入框最大值 */
    resetInputNumberMax() {
      this.$nextTick(() => {
        // 查找所有el-input-number组件并重置max属性
        const inputNumbers = this.$el.querySelectorAll('.el-input-number');
        inputNumbers.forEach(input => {
          if (input.__vue__) {
            input.__vue__.max = 999999;
          }
        });
      });
    },
    /** 提交入库表单 */
    submitInboundForm() {
      this.$refs["inboundForm"].validate(valid => {
        if (valid) {
          if (!this.inboundForm.partList || this.inboundForm.partList.length === 0) {
            this.$modal.msgError('请选择要入库的备件');
            return;
          }

          const hasInvalidQuantity = this.inboundForm.partList.some(part => !part.quantity || part.quantity <= 0);
          if (hasInvalidQuantity) {
            this.$modal.msgError('请为所有备件设置有效的入库数量');
            return;
          }

          const payload = {
            ...this.inboundForm,
            partList: this.inboundForm.partList
          };

          addTransaction(payload).then(response => {
            this.$modal.msgSuccess("入库成功");
            this.inboundDialogVisible = false;
            this.getList();
          });
        }
      });
    },
    /** 提交出库表单 */
    submitOutboundForm() {
      this.$refs["outboundForm"].validate(valid => {
        if (valid) {
          if (!this.outboundForm.partList || this.outboundForm.partList.length === 0) {
            this.$modal.msgError('请选择要出库的备件');
            return;
          }

          const hasInvalidQuantity = this.outboundForm.partList.some(part => !part.quantity || part.quantity <= 0);
          if (hasInvalidQuantity) {
            this.$modal.msgError('请为所有备件设置有效的出库数量');
            return;
          }

          // 检查出库数量是否超过库存
          const hasInsufficientStock = this.outboundForm.partList.some(part => {
            const stockTotal = Math.floor(part.stockTotal || 0);
            return part.quantity > stockTotal;
          });

          if (hasInsufficientStock) {
            this.$modal.msgError('出库数量不能超过当前库存数量，请检查库存数量');
            return;
          }

          const payload = {
            ...this.outboundForm,
            partList: this.outboundForm.partList
          };

          addTransaction(payload).then(response => {
            this.$modal.msgSuccess("出库成功");
            this.outboundDialogVisible = false;
            this.getList();
          });
        }
      });
    },
    /** 查看明细 */
    handleViewDetail(row) {
      this.currentTransaction = row;
      this.detailDialogVisible = true;
      this.detailLoading = true;
      // 为了避免后跳，优先确保仓库字典已加载
      Promise.resolve(this.warehouseOptions && this.warehouseOptions.length > 0 ? null : this.loadWarehouses())
        .then(() => getTransaction(row.txNo))
        .then(response => {
          this.transactionDetails = response.data.transactionItems || [];
        })
        .finally(() => {
          this.detailLoading = false;
        });
    },
    /** 删除交易 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除交易单号为"' + row.txNo + '"的数据项？').then(function() {
        return delTransaction(row.txNo);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
  }
};
</script>

<style scoped>
.operation-buttons {
  margin-bottom: 20px;
}

.operation-buttons .el-button {
  margin-right: 10px;
}

.part-details {
  margin-top: 20px;
}

.part-details h4 {
  margin-bottom: 15px;
  color: #303133;
}

.dialog-footer {
  text-align: right;
}
</style>
